<!-- 职位详情 -->
<template>
    <div class="enterprise-home">
        <div class="header-contain">
            <Header></Header>
        </div>
        <div class="wrap pt20 pb160">
            <div class="company-content">
                <div class="detail">
                    <img class="logo" :src="company.companyLogo || require('@/assets/image/default_enterprise_logo.jpg')" alt="logo"/>
                    <div class="desc flex-row-space-between">
                        <div>
                            <p class="name mb10">
                                {{ company.companyName }}
                            </p>
                            <p class="tags">
                                {{ company.belongsIndustryDesc }} |
                                {{ company.companyNatureDesc}} |
                                {{ company.companyScaleDesc }}人 |
                                {{ company.areaDesc }}
                            </p>
                        </div>
                        <div class="actions flex-column-center">
                            <el-button type="primary"
                                       size="small"
                                       style="padding: 9px 35px;"
                                       @click="addResumeAttentionHide"
                                       v-if="company.isCare == 2"
                            >
                                关注
                            </el-button>
                            <el-button type="primary"
                                       size="small"
                                       style="padding: 9px 35px;"
                                       @click="updateResumeAttentionHide"
                                       v-if="company.isCare == 1"
                            >
                                取消关注
                            </el-button>
                            <span>粉丝：{{company.careCount}}   </span>
                        </div>
                    </div>
                </div>
                <ul class="static text-center mt20 flex-row-space-around">
                    <li>
                        <p class="static-number">
                            {{ company.recruitmentingNum }}
                        </p>
                        <p class="static-text">在招职位</p>
                    </li>
                    <li>
                        <p class="static-number">
                            {{ company.resumeDispose | resumeDisposeFormat }} %
                        </p>
                        <p class="static-text">简历处理率</p>
                    </li>
                    <li>
                        <p class="static-number">
                            {{ company.receiveResume }}
                        </p>
                        <p class="static-text">收到的简历</p>
                    </li>
                    <li>
                        <p class="static-number">
                            {{ company.invitedInterview }}
                        </p>
                        <p class="static-text">面试邀请</p>
                    </li>
                </ul>
            </div>
            <div class="container transparent-bg flex-row-space-between">
                <div class="left-contain">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="企业主页" name="home">
                            <div class="white-bg pt20">
                                <div class="pt10 border-b-dashed">
                                    <p class="title-label">
                                        企业简介
                                    </p>
                                    <div class="textarea-text" v-html="company.companyIntroduction"></div>
                                </div>
                            </div>
                            <div class="mt30 white-bg">
                                <div class="flex-row-space-between">
                                    <p class="title-label">
                                        公司标签
                                    </p>
                                </div>
                                <el-tag type="info" v-for="item in companyInfo.informationInfo.corporateWelfare ? companyInfo.informationInfo.corporateWelfare.split(',') : []" :key="item">
                                    {{item}}</el-tag>
                            </div>
                        </el-tab-pane>
                       <!-- <el-tab-pane label="在招职位" name="job">
                            <ul class="mt30 pt30">
                                <li v-for="item in findPositionsList" class="job-recommend-item job-all-item flex-row-start border-b mb20"
                                    :key="item.id">
                                    <div class="logo-contain mr20">
                                        <img
                                            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600689368005&di=1d4fe4903381fc56631e1e2da0fd499e&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1306%2F03%2Fc0%2F21608389_1370244342428.jpg"
                                            class="responsive-img-fit">
                                    </div>
                                    <div class="job-recommend-text">
                                        <div class="mb10 flex-row-space-between">
									<span class="job-name inline-block fs16 black overflow-ellipsis">
										{{item.jobTitle}}
									</span>
                                            <span class="job-money inline-block pink-red mb10 fs16 overflow-ellipsis">
										{{item.salaryStart}}K - {{item.salaryEnd}}K
									</span>
                                        </div>
                                        <p class="overflow-ellipsis">
                                            {{item.jobDesc ? item.jobDesc : '暂无描述' }}
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </el-tab-pane>-->
                    </el-tabs>
                </div>


                <div class="right-contain white-bg pt20 pb20 pr20">
                    <div class="title-label">
                        联系方式
                    </div>
                    <p class="mb20 overflow-ellipsis">
                        网址： <span class="black">{{companyInfo.informationInfo.companyUrl}}</span>
                    </p>
                    <!-- <p class="mb20  overflow-ellipsis">
                        手机： <span class="black">{{companyInfo.contactWayInfo.phone}}</span>
                    </p> -->
                    <p class="mb20  overflow-ellipsis">
                        邮箱： <span class="black">{{companyInfo.contactWayInfo.email}}</span>
                    </p>
                    <p class="mb20 overflow-ellipsis">
                        地址： <span class="black">{{companyInfo.contactWayInfo.contactPhone}}</span>
                    </p>
                    <ul class="mt30 pt30">
                        <li class="flex-row-space-between">
                            <div class="title-label">
                                热门职位
                            </div>
                            <!--<router-link to="index.vue">
                                更多
                                <i class="el-icon-arrow-right"></i>
                            </router-link>-->
                        </li>
                        <li v-for="item in findPositionsList" class="job-recommend-item flex-row-start border-b mb20"
                            :key="item.id">
                          <!--  <div class="logo-contain mr20">
                                <img
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600689368005&di=1d4fe4903381fc56631e1e2da0fd499e&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1306%2F03%2Fc0%2F21608389_1370244342428.jpg"
                                    class="responsive-img-fit">
                            </div>-->
                            <div class="job-recommend-text">
                                <div class="mb10 flex-row-space-between">
									<router-link :to="`/internship-detail/${item.id}`" class="job-name inline-block fs16 black overflow-ellipsis">
										{{item.jobTitle}}
									</router-link>
                                    <span class="job-money inline-block pink-red mb10 fs16 overflow-ellipsis">
                                        <span v-if="!item.salaryStart && !item.salaryEnd">面议</span>
                                        <span v-else>{{item.salaryStart}}k-{{item.salaryEnd}}k</span>
									</span>
                                </div>
                                <p class="overflow-ellipsis">
                                    {{item.jobDesc ? item.jobDesc : '暂无描述' }}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import {
    addResumeAttentionHide,
    companyDetail,
    getCompanyBasicsInfoById,
    getCompanyPositionDetail,
    getJobInfo, updateResumeAttentionHide
} from "@/api/enterprise";
import moment from "moment";
import {addPositionApplied, findRecommendedPositionList} from "@/api/jobs";
import {addPositionCollection} from "@/api/base";
import {checkResponse} from "@/utils";

export default {
    name: 'EnterpriseHome',
    data() {
        return {
            hotKeys: ['销售', 'java', '人事会计', 'UI平面设计', '行政web', '前端', '房地产'],
            workExperience: [
                '形象好',
                '气质佳',
                '能出差',
                '很幽默',
                '技术精悍',
                '有亲和力',
                '高学历',
                '经验丰富',
                '能加班',
                '海归',
                '会开车',
                '口才好',
                '声音甜美',
                '诚实守信',
                '外语好',
                '性格开朗',
                '有上进心',
                '人脉广',
                '知识丰富',
                '多才多艺'
            ],
            workExperienceActive: 'all',
            resumeLabel: [
                '形象好',
                '气质佳',
                '能出差',
                '很幽默',
                '技术精悍',
                '有亲和力',
                '高学历',
                '经验丰富',
                '能加班',
                '海归',
                '会开车',
                '口才好',
                '声音甜美',
                '诚实守信',
                '外语好',
                '性格开朗',
                '有上进心',
                '人脉广',
                '知识丰富',
                '多才多艺'
            ],
            resumeLabelActive: 'all',
            sexData: [
                {value: '性别', label: '性别'},
                {value: '男', label: '男'},
                {value: '女', label: '女'}
            ],
            sexSelect: '性别',
            ageData: [
                {value: '18', label: '18'},
                {value: '20', label: '20'},
                {value: '22', label: '22'}
            ],
            ageSelect: '22',
            id: this.$route.params.id,
            positionInfo: {},
            jobList: [],
            activeName: 'home',
            findPositionsList: [],
            companyInfo: {},
            company: {},
            userType: this.$store.getters.userType,
            nickname: this.$store.getters.nickname,
        }
    },
    components: {
        Header,
        Footer
    },
    created() {
        this.getCompanyDetailStatic();
        this.getCompanyDetail();
        this.getJobInfo();
    },
    filters: {
        resumeDisposeFormat(val) {
            return val ? Number(val).toFixed(2): 0
        },
        sexFormat(val) {
            let sexObj = { 1: '男', 2: '女' }
            return sexObj[val]
        },
        yearFormat(val) {
            return new Date().getFullYear() - Number(val)
        },
        getEducation(val) {
            switch (val) {
                case 0:
                    return '无要求';
                case 1:
                    return '小学';
                case 2:
                    return '初中';
                case 3:
                    return '高中';
                case 4:
                    return '本科';
                case 5:
                    return '硕士';
                case 6:
                    return '博士';
            }
        },
        jobNatureFilter(val) {
            let obj = {
                1: '全职',
                2: '实习'
            }
            return obj[val]
        }
    },
    methods: {
        getCompanyDetailStatic() {
            companyDetail({companyId: this.id}).then(res => {
                this.company = res.datas
            });
        },
        getCompanyDetail() {
            getCompanyBasicsInfoById({id: this.id}).then(res => {
                this.companyInfo = res.datas
            });
        },
        addPositionCollection() {
            addPositionCollection({accountId: "", positionId: this.id}).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success('收藏成功');
                }
            })
        },
        addPositionApplied(positionId) {
            let data = {
                positionId: this.id,
                resumeId: 5,
                resumeSource: '',
                statusTag: ''
            }
            addPositionApplied(data).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success('申请成功');
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getJobInfo() {
            getJobInfo({limit: 10, page: 1, companyId: this.id}).then(res => {
                this.findPositionsList = res.data;
            });
        },
        addResumeAttentionHide() {
            if (!this.nickname) {
                this.$message.error('请先登录');
                return false;
            }
            if (this.userType == 'company') {
                this.$message.error('企业账户不可以关注企业');
                return false;
            }
            addResumeAttentionHide({companyId: this.id}).then(res=>{
                if (checkResponse(res, true)) {
                    // this.company.isCare = 1;
                    this.$message.success('关注成功');
                    this.getCompanyDetailStatic();
                }
            });
        },
        updateResumeAttentionHide() {
            updateResumeAttentionHide({companyId: this.id}).then(res=>{
                if (checkResponse(res, true)) {
                    // this.company.isCare = 2;
                    this.$message.success('取消关注成功');
                    this.getCompanyDetailStatic();
                }
            });
        }
    }
}
</script>

<style lang="scss">
@import "../../assets/styles/enterprise/base";
@import url('../../assets/styles/enterprise/common.css');

.el-select-dropdown__item.selected {
    color: #BE485E !important;
}

.pb160 {
    padding-bottom: 160px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3EACC4;
}

.enterprise-home {
    .company-content {
        background: #FFF;
        padding: 40px 20px 40px 20px;

        .detail {
            display: flex;

            .logo {
                width: 100px;
                height: 100px;
            }

            .desc {
                flex: 1 1;
                margin-left: 10px;

                .name {
                    color: #111;
                    font-size: 18px;
                }

                .actions {
                    .el-button {
                        margin-bottom: 10px;
                    }

                    .el-button + .el-button {
                        margin-left: 0;
                    }
                }
            }
        }

        .static {
            .static-number {
                font-size: 26px;
                color: $text-red;
                margin-bottom: 5px;
            }
        }
    }


    .el-tabs__header.is-top {
        background: #fff;
        margin: 0;
    }

    .el-tabs__item {
        color: $text-default;
    }

    .el-tabs__item.is-active {
        color: $text-blue;
    }

    .el-form-item__label {
        color: $text-default;
    }

    .el-tabs__active-bar {
        background-color: $text-blue;
    }

    .el-tabs__nav-wrap::after {
        background-color: #E8E8E8;
        height: 1px;
    }

    .textarea-text {
        min-height: 400px;
        width: 100%;
        overflow-y: visible;
        resize: none;
        border-width: 0px;
        outline: none;
    }

    .title-label {
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        font-weight: bold;
        color: #3DABC3;
        border-left: 4px solid #3DABC3;
        padding-left: 10px;
        margin-bottom: 30px;
    }

    .border-b-dashed {
        border-bottom: 1px dashed #E0E0E0;
    }

    .green-btns {
        color: #3DABC3;
        border: 1px solid #3DABC3;
    }

    .green {
        color: #3DABC3;
    }

    .green-bg {
        background-color: #3DABC3 !important;
    }

    .pink-red {
        color: #CD395B;
    }

    .wrap {
        background: #F7F7F7;

        .transparent-bg {
            background: transparent !important;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            background: #fff;

            .c666 {
                color: #666;
            }

            .money {
                color: #BE485E;
            }

            .left-contain {
                width: 820px;
                background: #FFF;
                padding: 10px 20px;

                .job-title {
                    width: 50%;

                    .job-name {
                        color: #111;
                    }

                    .money {
                        color: #CD395B;
                    }
                }

                .job-see {
                    width: 50%;
                    color: #999;
                }

                .job-detail-text {
                    width: 450px;
                    color: #777777;

                    .advantage-label {
                        background-color: #E7E7E7;
                        color: #777777;
                    }
                }

                .job-operating {
                    width: 330px;

                    .collect-btns {
                        width: 120px;
                    }
                }

                .hr-icon {
                    width: 20px;
                    height: 20px;
                    background: url('../../assets/image/enterprise/hr.png') no-repeat;
                    background-size: 100% 100%;
                }

                .img-contain {
                    width: 60px;
                    height: 60px;
                }

                .job-recommend-item {
                    width: 380px;
                    height: 110px;
                    border: 1px solid #E7E7E7;

                    .logo-contain {
                        width: 65px;
                        height: 65px;
                    }

                    .job-recommend-text {
                        width: 250px;
                    }
                }

                .job-all-item{
                    width: auto;
                    border: none;
                }
            }

            .right-contain {
                width: 380px;
                //height: 990px;

                .company-logo {
                    width: 80px;
                    height: 80px;
                }

                .job-recommend-item {
                    width: 320px;
                    height: 80px;

                    .logo-contain {
                        width: 65px;
                        height: 65px;
                    }

                    .job-recommend-text {
                        width: 195px;

                        .job-name {
                            width: 120px;
                        }

                        .job-money {
                            width: 75px;
                        }
                    }
                }
            }
        }
    }
}
</style>
